<template>
  <view class="profile-page">
    <!-- 用户信息头部 -->
    <view class="profile-header">
      <!-- 顶部操作栏 -->
      <view class="top-bar">
        <view class="top-left">
          <!-- 可以添加返回按钮等 -->
        </view>
        <view class="top-right">
          <view class="top-icon" @click="goToPersonalSettings">
            <text class="icon">👤</text>
          </view>
          <view class="top-icon" @click="goToScan">
            <text class="icon">🔄</text>
          </view>
          <view class="top-icon" @click="goToMore">
            <text class="icon">⚙️</text>
          </view>
        </view>
      </view>
      
      <!-- 用户基本信息 -->
      <view class="user-info-section">
        <view class="user-avatar" @click="changeAvatar">
          <image 
            :src="userInfo.avatar || '/static/images/default-avatar.png'" 
            mode="aspectFill"
            class="avatar-img"
          />
        </view>
        <view class="user-details">
          <view class="user-name">{{ userInfo.name || '黄河' }}</view>
          <view class="user-score">
            简历评分{{ userInfo.resumeScore || 88 }}分，建议优化
            <view class="question-icon">?</view>
          </view>
        </view>
        <view class="arrow-right" @click="goToEditProfile">
          <text class="arrow">></text>
        </view>
      </view>
      
      <!-- 统计数据 -->
      <view class="stats-section">
        <view class="stat-item" @click="goToApplications">
          <view class="stat-icon">
            <text class="iconfont">💬</text>
          </view>
          <text class="stat-label">沟通过</text>
        </view>
        <view class="stat-item" @click="goToResumes">
          <view class="stat-icon">
            <text class="iconfont">📄</text>
          </view>
          <text class="stat-label">已投简历</text>
        </view>
        <view class="stat-item" @click="goToInterviews">
          <view class="stat-icon">
            <text class="iconfont">📅</text>
          </view>
          <text class="stat-label">待面试</text>
        </view>
        <view class="stat-item" @click="goToFavorites">
          <view class="stat-icon">
            <text class="iconfont">⭐</text>
          </view>
          <text class="stat-label">收藏</text>
        </view>
      </view>
    </view>

    <!-- VIP升级横幅 -->
    <view class="vip-banner">
      <view class="banner-content">
        <view class="banner-text">
          <view class="banner-title">
            <text class="v-icon">V</text>
            想快点找到工作？快升级VIP
          </view>
          <view class="banner-subtitle">今日6万人加速中，再不追就晚啦</view>
        </view>
        <view class="upgrade-btn" @click="goToVip">
          去升级
        </view>
      </view>
    </view>

    <!-- 快捷功能区 -->
    <view class="quick-features">
      <view class="feature-row">
        <view class="feature-item" @click="goToCareerTest">
          <view class="feature-icon orange">
            <text class="iconfont">🎯</text>
          </view>
          <view class="feature-text">
            <text class="feature-title">职业测评</text>
            <text class="feature-subtitle">求职方向</text>
          </view>
          <text class="arrow">></text>
        </view>
        <view class="feature-item" @click="goToResumeCustom">
          <view class="feature-icon orange">
            <text class="iconfont">📝</text>
          </view>
          <view class="feature-text">
            <text class="feature-title">简历定制</text>
            <text class="feature-subtitle">高薪求职</text>
          </view>
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <!-- 常用功能 -->
    <view class="function-section">
      <view class="section-title">常用功能</view>
      <view class="function-grid">
        <view class="function-item" @click="goToOnlineResume">
          <view class="function-icon teal">
            <text class="iconfont">📄</text>
          </view>
          <view class="function-text">
            <text class="function-title">在线简历</text>
            <text class="function-subtitle">优化增加推荐</text>
          </view>
        </view>
        <view class="function-item" @click="goToAttachResume">
          <view class="function-icon teal">
            <text class="iconfont">📎</text>
          </view>
          <view class="function-text">
            <text class="function-title">附件简历</text>
            <text class="function-subtitle">制作/上传</text>
          </view>
        </view>
        <view class="function-item" @click="goToJobIntention">
          <view class="function-icon teal">
            <text class="iconfont">💼</text>
          </view>
          <view class="function-text">
            <text class="function-title">求职意向</text>
            <text class="function-subtitle">离职-随时到岗</text>
          </view>
        </view>
        <view class="function-item" @click="goToJobFollowup">
          <view class="function-icon teal">
            <text class="iconfont">📊</text>
          </view>
          <view class="function-text">
            <text class="function-title">求职追踪</text>
            <text class="function-subtitle">提升求职效率</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 其他功能 -->
    <view class="other-section">
      <view class="section-title">其他功能</view>
      <view class="other-grid">
        <view class="other-item" @click="goToCareerTestDetail">
          <view class="other-icon">
            <text class="iconfont">✅</text>
            <view class="red-dot" v-if="hasNewTest"></view>
          </view>
          <text class="other-title">职业测评</text>
        </view>
        <view class="other-item" @click="goToCustomerService">
          <view class="other-icon">
            <text class="iconfont">😊</text>
          </view>
          <text class="other-title">我的客服</text>
        </view>
        <view class="other-item" @click="goToCharity">
          <view class="other-icon">
            <text class="iconfont">❤️</text>
          </view>
          <text class="other-title">直直公益</text>
        </view>
        <view class="other-item" @click="goToPersonalCenter">
          <view class="other-icon">
            <text class="iconfont">🏠</text>
          </view>
          <text class="other-title">个人主页</text>
        </view>
      </view>
    </view>

    <!-- 联系方式 -->
    <view class="contact-section">
      <view class="contact-item">
        <text class="contact-text">客服电话 400-065-5799  工作时间 8:00-22:00</text>
      </view>
      <view class="contact-item">
        <text class="contact-text">老年人直连热线 400-661-6030 工作时间 8:00-22:00</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'ProfilePage',
  data() {
    return {
      userStats: {
        applicationCount: 0,
        favoriteCount: 0,
        viewCount: 0
      },
      resumeCount: 0,
      jobCount: 0,
      hasNewTest: true // 是否有新的测评
    }
  },
  computed: {
    ...mapGetters('user', ['userInfo', 'isLogin', 'userType']),
    
    userTypeText() {
      return this.userType === 1 ? '求职者' : '招聘者'
    }
  },
  onLoad() {
    this.initPage()
  },
  onShow() {
    // 页面显示时刷新数据
    if (this.isLogin) {
      this.loadUserStats()
    }
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  methods: {
    ...mapActions('user', ['logout', 'getUserInfo']),

    // 初始化页面
    async initPage() {
      if (this.isLogin) {
        try {
          await Promise.all([
            this.getUserInfo(),
            this.loadUserStats()
          ])
        } catch (error) {
          console.error('初始化个人中心失败:', error)
        }
      }
    },

    // 刷新数据
    async refreshData() {
      try {
        await this.initPage()
        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        })
      } catch (error) {
        uni.showToast({
          title: '刷新失败',
          icon: 'error'
        })
      } finally {
        uni.stopPullDownRefresh()
      }
    },

    // 加载用户统计数据
    async loadUserStats() {
      try {
        // TODO: 调用API获取用户统计数据
        // const response = await api.get('/user/stats')
        // this.userStats = response.data
        
        // 模拟数据
        this.userStats = {
          applicationCount: 15,
          favoriteCount: 8,
          viewCount: 123
        }
        
        if (this.userType === 1) {
          this.resumeCount = 2
        } else {
          this.jobCount = 5
        }
      } catch (error) {
        console.error('加载用户统计失败:', error)
      }
    },

    // 格式化手机号
    formatPhone(phone) {
      if (!phone) return ''
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },

    // 更换头像
    changeAvatar() {
      if (!this.isLogin) {
        this.goToLogin()
        return
      }
      
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // TODO: 上传头像
          uni.showToast({
            title: '头像上传功能开发中',
            icon: 'none'
          })
        }
      })
    },

    // 跳转到登录页面
    goToLogin() {
      uni.navigateTo({
        url: '/pages/auth/login'
      })
    },

    // 跳转到编辑资料页面
    goToEditProfile() {
      uni.showToast({
        title: '编辑资料功能开发中',
        icon: 'none'
      })
    },

    // 跳转到简历管理
    goToResume() {
      uni.navigateTo({
        url: '/pages/resume/edit'
      })
    },

    // 跳转到简历列表
    goToResumes() {
      uni.showToast({
        title: '简历列表功能开发中',
        icon: 'none'
      })
    },

    // 跳转到VIP升级
    goToVip() {
      uni.showToast({
        title: 'VIP升级功能开发中',
        icon: 'none'
      })
    },

    // 跳转到职业测评
    goToCareerTest() {
      uni.showToast({
        title: '职业测评功能开发中',
        icon: 'none'
      })
    },

    // 跳转到简历定制
    goToResumeCustom() {
      uni.showToast({
        title: '简历定制功能开发中',
        icon: 'none'
      })
    },

    // 跳转到在线简历
    goToOnlineResume() {
      uni.showToast({
        title: '在线简历功能开发中',
        icon: 'none'
      })
    },

    // 跳转到附件简历
    goToAttachResume() {
      uni.showToast({
        title: '附件简历功能开发中',
        icon: 'none'
      })
    },

    // 跳转到求职意向
    goToJobIntention() {
      uni.showToast({
        title: '求职意向功能开发中',
        icon: 'none'
      })
    },

    // 跳转到求职追踪
    goToJobFollowup() {
      uni.showToast({
        title: '求职追踪功能开发中',
        icon: 'none'
      })
    },

    // 跳转到职业测评详情
    goToCareerTestDetail() {
      uni.showToast({
        title: '职业测评详情功能开发中',
        icon: 'none'
      })
    },

    // 跳转到客服
    goToCustomerService() {
      uni.showToast({
        title: '客服功能开发中',
        icon: 'none'
      })
    },

    // 跳转到公益
    goToCharity() {
      uni.showToast({
        title: '公益功能开发中',
        icon: 'none'
      })
    },

    // 跳转到个人设置
    goToPersonalSettings() {
      uni.showToast({
        title: '个人设置功能开发中',
        icon: 'none'
      })
    },

    // 跳转到扫一扫
    goToScan() {
      uni.showToast({
        title: '扫一扫功能开发中',
        icon: 'none'
      })
    },

    // 跳转到更多设置
    goToMore() {
      uni.showToast({
        title: '更多设置功能开发中',
        icon: 'none'
      })
    },

    // 跳转到投递记录
    goToApplications() {
      uni.showToast({
        title: '投递记录功能开发中',
        icon: 'none'
      })
    },

    // 跳转到收藏夹
    goToFavorites() {
      uni.showToast({
        title: '收藏夹功能开发中',
        icon: 'none'
      })
    },

    // 跳转到被查看记录
    goToViews() {
      uni.showToast({
        title: '被查看记录功能开发中',
        icon: 'none'
      })
    },

    // 跳转到面试安排
    goToInterviews() {
      uni.showToast({
        title: '面试安排功能开发中',
        icon: 'none'
      })
    },

    // 跳转到职位管理
    goToJobManagement() {
      uni.showToast({
        title: '职位管理功能开发中',
        icon: 'none'
      })
    },

    // 跳转到候选人管理
    goToCandidates() {
      uni.showToast({
        title: '候选人管理功能开发中',
        icon: 'none'
      })
    },

    // 跳转到公司信息
    goToCompanyInfo() {
      uni.showToast({
        title: '公司信息功能开发中',
        icon: 'none'
      })
    },

    // 跳转到招聘数据
    goToRecruitData() {
      uni.showToast({
        title: '招聘数据功能开发中',
        icon: 'none'
      })
    },

    // 跳转到搜索历史
    goToSearchHistory() {
      uni.showToast({
        title: '搜索历史功能开发中',
        icon: 'none'
      })
    },

    // 跳转到职位提醒
    goToJobAlert() {
      uni.showToast({
        title: '职位提醒功能开发中',
        icon: 'none'
      })
    },

    // 跳转到设置
    goToSettings() {
      uni.showToast({
        title: '设置功能开发中',
        icon: 'none'
      })
    },

    // 跳转到帮助
    goToHelp() {
      uni.showToast({
        title: '帮助功能开发中',
        icon: 'none'
      })
    },

    // 跳转到关于我们
    goToAbout() {
      uni.showToast({
        title: '关于我们功能开发中',
        icon: 'none'
      })
    },

    // 处理退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.logout()
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-page {
  background-color: #ffffff;
  min-height: 100vh;
  
  // 用户信息头部
  .profile-header {
    background: linear-gradient(180deg, #74d4e8 0%, #e8f4f8 70%, #ffffff 100%);
    padding: 0;
    position: relative;
    
    // 底部圆角过渡
    &::after {
      content: '';
      position: absolute;
      bottom: -20rpx;
      left: 0;
      right: 0;
      height: 40rpx;
      background: #ffffff;
      border-radius: 0 0 30rpx 30rpx;
      z-index: -1;
    }
    
    // 顶部操作栏
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 32rpx;
      
      .top-left {
        // 预留空间
      }
      
      .top-right {
        display: flex;
        gap: 24rpx;
        
        .top-icon {
          width: 64rpx;
          height: 64rpx;
          background-color: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          backdrop-filter: blur(10rpx);
          
          .icon {
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }
    
    .user-info-section {
      display: flex;
      align-items: center;
      padding: 0 32rpx 32rpx;
      
      .user-avatar {
        width: 120rpx;
        height: 120rpx;
        margin-right: 24rpx;
        
        .avatar-img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 4rpx solid rgba(255, 255, 255, 0.8);
        }
      }
      
      .user-details {
        flex: 1;
        
        .user-name {
          font-size: 40rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 12rpx;
          text-shadow: none;
        }
        
        .user-score {
          font-size: 26rpx;
          color: #666;
          display: flex;
          align-items: center;
          
          .question-icon {
            width: 32rpx;
            height: 32rpx;
            background-color: rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            color: #666;
            font-size: 18rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 8rpx;
          }
        }
      }
      
      .arrow-right {
        padding: 8rpx;
        
        .arrow {
          color: #333;
          font-size: 32rpx;
          font-weight: 600;
        }
      }
    }
    
    .stats-section {
      display: flex;
      justify-content: space-around;
      padding: 0 32rpx 32rpx;
      
      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .stat-icon {
          width: 60rpx;
          height: 60rpx;
          background-color: rgba(255, 255, 255, 0.8);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 8rpx;
          font-size: 24rpx;
        }
        
        .stat-label {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
  
  // VIP升级横幅
  .vip-banner {
    margin: 50rpx 32rpx 32rpx;
    background: linear-gradient(135deg, #4a90a4 0%, #5a7a7a 100%);
    border-radius: 16rpx;
    padding: 32rpx;
    position: relative;
    z-index: 2;
    
    .banner-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .banner-text {
        flex: 1;
        
        .banner-title {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          font-weight: 600;
          color: #fff;
          margin-bottom: 8rpx;
          
          .v-icon {
            background-color: #ff6b35;
            color: #fff;
            width: 32rpx;
            height: 32rpx;
            border-radius: 6rpx;
            font-size: 20rpx;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8rpx;
          }
        }
        
        .banner-subtitle {
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.8);
        }
      }
      
      .upgrade-btn {
        background-color: rgba(255, 255, 255, 0.9);
        color: #4a90a4;
        padding: 16rpx 32rpx;
        border-radius: 32rpx;
        font-size: 26rpx;
        font-weight: 600;
      }
    }
  }
  
  // 快捷功能区
  .quick-features {
    margin: 32rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    
    .feature-row {
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      
      .feature-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .feature-icon {
          width: 60rpx;
          height: 60rpx;
          border-radius: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;
          font-size: 28rpx;
          
          &.orange {
            background-color: #fff5e6;
            color: #ff8c00;
          }
        }
        
        .feature-text {
          flex: 1;
          display: flex;
          flex-direction: column;
          
          .feature-title {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 4rpx;
          }
          
          .feature-subtitle {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .arrow {
          color: #ccc;
          font-size: 28rpx;
        }
      }
    }
  }
  
  // 常用功能
  .function-section {
    margin: 32rpx;
    
    .section-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .function-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;
      
      .function-item {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 32rpx 24rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        
        .function-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16rpx;
          font-size: 32rpx;
          
          &.teal {
            background-color: #e0f7fa;
            color: #26c6da;
          }
        }
        
        .function-text {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .function-title {
            font-size: 26rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 4rpx;
          }
          
          .function-subtitle {
            font-size: 22rpx;
            color: #999;
          }
        }
      }
    }
  }
  
  // 其他功能
  .other-section {
    margin: 32rpx;
    
    .section-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .other-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32rpx;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 32rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
      
      .other-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .other-icon {
          position: relative;
          width: 60rpx;
          height: 60rpx;
          background-color: #f8f9fa;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 12rpx;
          font-size: 24rpx;
          
          .red-dot {
            position: absolute;
            top: 8rpx;
            right: 8rpx;
            width: 16rpx;
            height: 16rpx;
            background-color: #ff4757;
            border-radius: 50%;
          }
        }
        
        .other-title {
          font-size: 22rpx;
          color: #333;
          text-align: center;
        }
      }
    }
  }
  
  // 联系方式
  .contact-section {
    margin: 32rpx;
    
    .contact-item {
      margin-bottom: 16rpx;
      
      .contact-text {
        font-size: 22rpx;
        color: #999;
        text-align: center;
        display: block;
      }
    }
  }
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
  .profile-page {
    .function-section .function-grid {
      grid-template-columns: 1fr;
    }
    
    .other-section .other-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
</style>
  }
}
</style>